<template>
  <div>
    <div class="panel-table">
      <p class="p_style">报价截至时间：
        <span style="color:#DA1F24">{{quoLimitTime}}</span>
      </p>
    </div>
    <time-line :showInfo="showInfo" :url="infourl" :formData="formData" ref="tim"></time-line>
    <table-ext :columns="columns" :config="config" ref="tableExt">
      <template slot="table-action">
        <el-button icon="el-icon-success" v-if="isShow" @click="publish" type="success">提交比价</el-button>
        <el-button icon="el-icon-warning" type="info" @click="dialogFormVisible = true">作废</el-button>
        <el-button icon="el-icon-view" type="primary" @click.stop="() => {$refs.tim.toggleDiolag()}">查看日志</el-button>
      </template>
    </table-ext>
    <el-dialog title="关闭询价单" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="关闭原因">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancel">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import qs from 'qs';
  import timeLine from '@/components/timeline.vue';
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  export default {
    // 引入自定义表格组件
    components: {
      'table-ext': TableExt,
      timeLine
    },
    data() {
      return {
        //业务日志
        showInfo: true,
        infourl: this.lib.config.host.system + '/system/log/getList',
        formData: {
          moduleCode: 'RFQ',
          businessId: this.$route.query.id
        },
        //业务日志  
        form: {
          reasonL: '',
          rfqEnquiryId: this.$route.query.id
        },
        isShow: false,
        dialogFormVisible: false,
        quoLimitTime: this.$route.query.quoLimitTime,
        config: { // 页面共通配置
          title: '报价', //页面标题
          isPage: true, //是否分页          
          isNo: false, //是否显示序号
          selection: false, //是否显示复选框
          align: 'center', //表格居中
          crudMapping: { // CRUD方法
            query: {
              url: this.lib.config.host.rfq + '/ctmgt/rfq/enquiry/queryVendors/' + this.$route.query.id,
              resultFun(response) { // 修改返回默认值
                return {
                  list: response.data, //返回列表数据
                  total: response.data.total //返回总数
                };
              }
            }
          }
        },
        // 查询表单配置

        // 表格列定义
        columns: [{
          label: '供应商编码',
          key: 'vendorCode',
        }, {
          label: '供应商名称',
          key: 'vendorName',
        }, {
          label: '报价状态',
          key: 'quoteStatus',
          render: (createElement, params) => { //动态渲染, 字典表示例
            return createElement(TableIcon, {
              props: {
                flag: params.row.quoteStatus,
                titles: [{
                  status: 0,
                  title: '未报价'
                }, {
                  status: 1,
                  title: '已报价'
                }, {
                  status: 2,
                  title: '部分报价'
                }, {
                  status: -1,
                  title: '放弃报价'
                }]
              }
            });
          }
        }, {
          label: '报价数',
          key: 'alreadyQuoteNum',
        }, {
          label: '放弃报价数',
          key: 'giveUpQuoteNum',
        }, {
          label: '未报价数',
          key: 'notQuoteNumt',
        }]
      };
    },
    mounted() { // VUE页面渲染之后调用的方法
      this.init()
    },
    methods: {
      closeDialog() {
        this.showInfo = false;
      },
      //作废
      cancel() {
        this.axios.post(this.lib.config.host.rfq + "/ctmgt/rfq/enquiry/compare/rfqClose",qs.stringify(this.form))
          .then((response) => {
            if(response.data.success){
            this.dialogFormVisible=false;
            this.$router.push('/Index/Rfq/RfqEnquiry')
            this.$refs['tableExt'].refreshTable();
            this.$message({
              type: 'success',
              message: '操作成功!'
            });             
            }
          })
          .catch((error) => {
            console.log(error)
          });
      },
      init() {
        let myDate = new Date();
        let timestamp = new Date(this.$route.query.quoLimitTime);
        // if (myDate >= timestamp) {
        //   this.isShow = true;
        // }else 
        if (this.$route.query.submitCompStatus == this.lib.common.status.YES) {
          this.isShow = false;
        } else{
          this.isShow=true;
        }
        // else {
        //   this.isShow = false;
        // }
      },
      // 提交比价
      publish() {
        this.$confirm('是否提交比价?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.lib.config.host.rfq + "/ctmgt/rfq/enquiry/quoting/submitCompare/" + this.$route.query
              .id)
            .then((response) => {
              if(response.data.success){
              //this.$refs['tableExt'].refreshTable();
              this.$message({
                type: 'success',
                message: '提交比价成功!'
              });
              }

            })
            .catch((error) => {
              console.log(error)
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });
        });

      }
    }
  }

</script>
